<template>
  <!--  -->

  <div
    v-loading="loading"
    element-loading-text="Data generation in progress..."
    style="padding: 0 30px; margin: 20px auto"
  >
    <div>
      <el-tabs
        @tab-change="handleClick"
        type="border-card"
        v-model="activeName"
        class="demo-tabs"
      >
        <el-tab-pane label="Expression Nettwork" name="first">
          <span style="margin-right: 10px">Select Presentation</span>
          <el-select
            @change="getRights"
            v-model="Presentation"
            placeholder="Presentation"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <div
            style="
              width: 100%;
              margin-top: 20px;
              display: flex;
              justify-content: space-between;
            "
          >
            <div class="demo">
              <img style="width: 100%; height: 100%" :src="leftImg" alt="" />
            </div>
            <div class="demo">
              <img style="width: 100%; height: 100%" :src="rightImg" alt="" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="Metabolic Pathways" name="second">
          <span style="margin-right: 10px">threshold</span>
          <el-input
            style="width: 100px"
            v-model="data.threshold"
            placeholder=""
          ></el-input>

          <span style="margin-right: 10px; margin-left: 10px">neighbors</span>

          <el-input
            style="width: 100px"
            v-model="data.neighbors"
            placeholder=""
          ></el-input>
          Top_N
          <el-input
            style="width: 100px"
            v-model="data.topN"
            placeholder=""
          ></el-input>
          <el-button type="primary" style="margin: 0 30px" @click="handleClicks"
            >generate</el-button
          >
          <el-select
            @change="hgf"
            v-model="cellType"
            placeholder="Cell type"
            style="width: 240px; margin-left: 50px"
          >
            <el-option
              v-for="item in optionss"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <div
            style="
              width: 100%;
              height: 800px;
              text-align: center;
              border-radius: 10px;
              margin-top: 10px;
              border: 1px solid #000;
            "
          >
            <dot
              v-if="chuant.length && cellType == ''"
              :data="chuant"
              :width="1000"
              :height="1000"
              :yuan="8"
              :fons="10"
            />
            <img :src="bonimg" style="width: 750px; height: 750px" alt="" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import {useRouter, useRoute} from "vue-router";
import {h} from "vue";
import {ElNotification} from "element-plus";
import dot from "../scMetabolism/dot.vue";
import {getlft, getRight, geneJudge, runMapJob} from "../../api/index";
import {ref, onMounted, nextTick, reactive, onUpdated} from "vue";
import {jcancerType} from "../dta/cancerTye";
import Papa from "papaparse";
let loading = ref(true);
const route = useRoute();
let leftImg = ref();
let rightImg = ref();
let data = reactive({
  threshold: 0.5,
  neighbors: 2,
  topN: 3,
});
let cellType = ref("");

let optionss = ref([]);
let rightSrc = ref();
let judgeList = ref([]);
const activeName = ref("first");
let Presentation = ref("dimplot");
const getlfts = () => {
  getlft(`${route.query.cancer}.png`).then((res) => {
    leftImg.value = res;
    console.log(leftImg.value);
  });
};
getlfts();

const getjudgeLists = () => {
  geneJudge(judgeList.value).then((response) => {});
};

let chuant = ref([]);
let bonimg = ref("");
const hgf = () => {
  getRight(`path_umap_${cellType.value}.png`).then((res) => {
    bonimg.value = res;
  });
};

const handleClicks = () => {
  loading.value = true;
  runMapJob(data)
    .then((ea) => {
      loading.value = false;
      if (ea.data) {
        if (cellType.value.length == 0) {
          let tim = setInterval(() => {
            getRight("path_umap_loc.csv").then((res) => {
              if (!res.headers) {
                loading.value = false;
                Papa.parse(res, {
                  header: true, // 指定第一行为标题行
                  dynamicTyping: true, // 自动转换数据类型
                  complete: function (results) {
                    // 处理解析完成的结果
                    const datas = results.data
                      .map((row, index) => {
                        if (index === 0) return null; // 跳过标题行

                        return {
                          pathway: row.pathway,
                          x: parseFloat(row.UMAP_1 * 50), // 将字符串转换为浮点数
                          y: parseFloat(row.UMAP_2 * 70), // 将字符串转换为浮点数
                        };
                      })
                      .filter(
                        (item) => item !== null && item.pathway !== undefined
                      ); // 过滤掉标题行后的无效数据

                    chuant.value = datas;

                    // 这里可以将 data 传递给其他函数或者保存到状态中
                  },
                });
                clearInterval(tim);
              }
            });
          }, 1000);
        } else {
          hgf();
        }
      } else {
        chuant.value = "";
        ElNotification({
          title: "Tips",
          message: h("i", {style: "color: red"}, "Generation failed..."),
        });
      }
    })
    .catch(() => {
      chuant.value = "";
      loading.value = false;
      ElNotification({
        title: "Tips",
        message: h("i", {style: "color: red"}, "Generation failed..."),
      });
    });
};
const handleClick = (event) => {
  if (event == "second" && cellType.value.length == 0) {
    loading.value = true;
    runMapJob(data)
      .then((a) => {
        if (a.data) {
          let tim = setInterval(() => {
            getRight("path_umap_loc.csv").then((res) => {
              if (!res.headers) {
                loading.value = false;
                Papa.parse(res, {
                  header: true, // 指定第一行为标题行
                  dynamicTyping: true, // 自动转换数据类型
                  complete: function (results) {
                    console.log(results);
                    // 处理解析完成的结果
                    const datas = results.data
                      .map((row, index) => {
                        if (index === 0) return null; // 跳过标题行

                        return {
                          pathway: row.pathway,
                          x: parseFloat(row.UMAP_1 * 50), // 将字符串转换为浮点数
                          y: parseFloat(row.UMAP_2 * 70), // 将字符串转换为浮点数
                        };
                      })
                      .filter(
                        (item) => item !== null && item.pathway !== undefined
                      ); // 过滤掉标题行后的无效数据

                    chuant.value = datas;

                    // 这里可以将 data 传递给其他函数或者保存到状态中
                  },
                });
                clearInterval(tim);
              }
            });
          }, 1000);
        }
      })
      .catch(() => {
        loading.value = false;
        ElNotification({
          title: "Tips",
          message: h("i", {style: "color: red"}, "Generation failed..."),
        });
      });
  }
};
const getRights = () => {
  loading.value = true;

  getRight(`${Presentation.value}.png`).then((result) => {
    console.log(result);
    if (!result.headers) {
      // clearInterval(timer);
      loading.value = false;
      rightImg.value = result;
    }
  });
};
getRights();

let options = [
  {
    value: "dimplot",
    label: "dimplot",
  },
  {
    value: "boxplot",
    label: "boxplot",
  },
  {
    value: "dotplot",
    label: "dotplot",
  },
];

const shu = () => {
  let a = jcancerType.filter((item) => {
    if (item.label == route.query.cancer) return item;
  });
  optionss.value = [
    {
      value: "total",
      label: "total",
    },
    ...a[0].didi,
  ];
  console.log(a);
};
shu();
console.log(route.query.cancer);
</script>

<style scoped>
:deep(.el-tabs__nav-scroll) {
  width: 500px;
  margin: auto;
}
.el-tabs__nav {
  width: 200px;
}
.demo {
  width: 45%;
  height: 450px;
  border: 1px solid black;
  border-radius: 10px;
}
</style>
